<template>
	<uv-navbar 
		:title="title" 
		:bgColor="bgColor" 
		:titleStyle="{
			'color':titleColor,
			'fontSize':titleFontSize,
			'fontWeight':500
		}"
		:placeholder="placeholder"
		:leftIconColor="leftIconColor"
		:autoBack="autoBack"
		:leftIconSize="leftIconSize"		
	>
		<template v-slot:left>
			<slot name="left" v-if="$slots['left']"></slot>
			<z-icon v-else builtIn :name="leftIcon" :color="leftIconColor" :size="leftIconSize"></z-icon>
		</template>
		<template v-slot:right>
			<slot name="right" v-if="$slots['right']"></slot>
		</template>
	</uv-navbar>
</template>

<script setup>
	import props from './props.js';
	defineProps({
		...props	
	})
</script>

<style>
</style>